import { useService } from 'bpmn-js-properties-panel'
import { jsx } from '@bpmn-io/properties-panel/preact/jsx-runtime'
export default function (element) {
  return {
    id: 'formDesign',
    component: FormDesignComponent
  }
}

function FormDesignComponent(props) {
  const { element } = props
  const modeling = useService('modeling')
  const translate = useService('translate')
  const getValue = () => {
    return element.businessObject.skrivetForm || ''
  }

  const setValue = (value) => {
    return modeling.updateProperties(element, {
      skrivetForm: value
    })
  }
  const operationName = translate('edit')
  const statusName = translate(getValue() != '' ? 'configured' : 'not configured')
  const statusStyle =
    getValue() == '' ? 'color:red;margin-right:30px' : 'color:blue;margin-right:30px'
  const eventBus = useService('eventBus')
  return jsx('div', {
    style: 'text-align:center',
    children: [
      jsx('span', {
        children: statusName,
        style: statusStyle
      }),
      jsx('span', {
		style: 'color:#1890FF;cursor:pointer',
        children: operationName,
        onclick: function () {
          const options = {
            key: 'startEdit',
            callback: function (e) {
              setValue(e)
            },
            value: getValue()
          }
          eventBus.fire('skrivet:form', eventBus.createEvent(options))
        }
      })
    ]
  })
}
